iT邦幫忙

第 11 屆 iThome 鐵人賽

DAY 21
2
Software Development

精通 Visual Studio Code系列 第 21

DAY 21 HTML 神器 - Emmet (Part 4)

  • 分享至 

  • xImage
  •  

DAY 21 HTML 神器 - Emmet (Part 4)

群組

你可以使用 () 來對一整個元素做操作,如 table>(tr>td*3)*3

標籤的特殊變種

Emmet 有專門針對一些標籤設計特殊的變種,例如 input 有很多種不一樣的輸入框,這時候可以用 : 來指定要哪一種特殊的變種:

  • input:hidden
  • input:text
  • input:password
  • input:tel
  • input:number
  • input:checkbox
  • input:radio
  • input:file
  • input:submit
  • input:button
  • input:reset
  • 還有很多沒有列出來的就直接去查 官方小抄 吧!

相鄰元素

你可以使用 + 來產生相鄰的元素,如 label+input:text

自動編號

你可以使用 $ 來幫你自動編號,如 img#icon-$*5

填充文字

你可以使用 lorem 來產生亂數英文單字來填充你的網頁:

你還可以使用 lorem200 ,後面的數字代表你要多少個英文單字:

更多可用的關鍵字

如果你想要知道更多可用的 Emmet 關鍵字,建議你去看 Emmet 的官方小抄


上一篇
DAY 20 HTML 神器 - Emmet (Part 3)
下一篇
DAY 22 CSS 神器 - Emmet
系列文
精通 Visual Studio Code31
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言